<template>
  <view class="c-wrapper">
    <!-- v-model 用法 -->
    <view class="search-wrapper">
      <slot></slot>
      <view class="search-input">
        <uni-search-bar
          id="search"
          @input="search"
          placeholder="请输入搜索内容"
          cancelButton="none"
          v-model="searchText"
        ></uni-search-bar>
      </view>

      <view class="search-view" :style="{ top: searchHeight + 'px' }" v-if="searchText != '' && searchText.length != 0">
        <view class="no-result" v-if="resultList.length === 0 || resultList == []">
          <image src="../../static/no-search-result.svg"></image>
          <text>无搜索结果</text>
        </view>

        <view class="result" v-else>
          <view
            class="search-item"
            v-for="search_item in resultList"
            :key="search_item.id"
            @click="gotoGoodsInfo(search_item.id)"
          >
            <uni-icons type="search" size="15" color="#474747" style="margin-right: 5upx"></uni-icons>
            {{ search_item.name }}
          </view>
          <view class="search-count">搜索结果 {{ resultList.length }} 条</view>
        </view>
      </view>
    </view>

    <view class="search-box" :style="'height:' + searchHeight + 'px'"></view>
  </view>
</template>

<script>
export default {
  props: {
    noClear: {
      type: Boolean,
      default: true
    },
    result: {
      type: Array
    }
  },
  components: {},
  computed: {
    resultList() {
      return this.result
    }
  },
  data() {
    return {
      searchText: '',
      noClearData: false,
      searchHeight: 0
    }
  },

  watch: {
    noClear(n) {
      if (!n) this.searchText = ''
    },
    searchText(n) {
      this.$emit('input', { show: !(n.length === 0 || n == ''), details: n })
    }
  },

  created() {
    const searchView = uni.createSelectorQuery().in(this)

    setTimeout(() => {
      searchView
        .select('#search')
        .boundingClientRect((data) => {
          this.searchHeight = data.height
        })
        .exec()
    }, 50)
  },
  methods: {
    search(e) {
      // console.log('搜索内容', e)
      if (e === '') {
        this.noClearData = false
      } else {
        this.noClearData = true
      }
    },
    gotoGoodsInfo(id) {
      uni.navigateTo({
        url: '/pages/goods/index?id=' + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-wrapper {
  padding: 0;
}

.search-box {
  width: calc(100upx - 5upx);
}

.search-wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  top: -1upx;
  left: 0%;
  z-index: 50;
  box-shadow: 5upx 5upx 5px rgba($color: #d8d8d8, $alpha: 0.5);

  .search-input {
    width: 100%;
  }
}

.search-view {
  padding: 15upx 25upx;
  background-color: #fff;
  box-sizing: border-box;
  position: absolute;
  width: 100vw;
  z-index: 999;
  min-height: 180upx;
  box-shadow: 5upx 5upx 5px rgba($color: #d8d8d8, $alpha: 0.5);

  .search-item {
    font-size: 35upx;
    padding: 20upx;
    color: $uni-text-color;
    border-bottom: 3upx solid #ede7e7;
  }

  .search-count {
    position: absolute;
    width: 300upx;
    font-size: 25upx;
    color: $uni-text-color-placeholder;

    text-align: center;
    bottom: 20upx;
    left: calc(50% - 150upx);
  }

  .no-result {
    width: 100%;
    height: 180upx;
    display: flex;
    justify-content: center;
    align-items: center;

    text {
      width: 200upx;
      font-size: 35upx;
      text-align: center;

      color: #666666;
    }

    image {
      width: 100upx;
      position: relative;
      opacity: 0.5;
    }
  }
}
</style>
